<template>
  <el-form :model="form" :label-width="80" status-icon :rules="rules" ref="formRef">
    <el-form-item label="会员姓名" prop="name">
      <el-input v-model="form.name" placeholder="会员姓名" />
    </el-form-item>
    <el-form-item label="手机号" prop="phone">
      <el-input v-model="form.phone" placeholder="手机号" />
    </el-form-item>
    <el-form-item label="性别" prop="sex">
      <el-radio v-model="form.sex" value="男" size="large">男
      </el-radio>
      <el-radio v-model="form.sex" value="女" size="large">女
      </el-radio>
    </el-form-item>
    <el-form-item label="出生日期">
      <el-date-picker v-model="form.birthday" type="date" placeholder="yyyy-mm-dd" format="YYYY-MM-DD"
        value-format="YYYY-MM-DD" style="width: 100%" />
    </el-form-item>
    <el-form-item label="备注">
      <el-input v-model="form.remark" type="textarea" />
    </el-form-item>
    <el-form-item v-if="type=='add'">
      <el-button type="primary" @click="saveMemberContinue(formRef)">保存,为该会员绑定会员卡</el-button>
      <el-button @click="saveMember(formRef)">保存会员信息，暂不绑定会员卡</el-button>
      <el-button @click="cancelForm">取消</el-button>
    </el-form-item>
    <el-form-item v-else>
      <el-button type="primary" @click="updateMember">保存</el-button>
      <el-button @click="cancelForm">取消</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup>
import {ref,reactive} from 'vue'
 const {form,active} = defineProps(['form','active','drawer','editMemberDrawer','type'])
 console.log(form)
 const  formRef=ref()
 const rules=reactive({
   name: [{ required: true, message: '请输入会员姓名', trigger: 'blur' },],
   phone: [{ required: true, message: '请输入手机号', trigger: 'blur' },],
   sex: [
     {
       required: true,
       message: '请选择性别',
       trigger: 'change',
     },
   ]
  })
 //自定义事件
 const $emit = defineEmits(['update:active','update:drawer','update:editMemberDrawer'])
//保存按钮  保存 为会员绑定会员卡
const saveMemberContinue = async (formEl) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
      if (valid) {
        console.log('submit!')
        //todo。。保存会员信息

        // 跳转到绑定会员的表单
        // active.value = 2 //绑定会员卡
        $emit('update:active', 2)
      } else {
        console.log('error submit!', fields)
      }
    })
  }

////保存会员信息，暂时不绑定会员卡
const saveMember = async (formEl) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
      if (valid) {
        console.log('submit!')
        //todo  会员绑定 调用后天接口
        // active.value = 3
        $emit('update:active', 3)
      } else {
        console.log('error submit!', fields)
      }
    })
  }

//取消按钮
const cancelForm = () => {
    $emit('update:drawer', false)
    $emit('update:editMemberDrawer', false)
    // drawer.value = false
    // editMemberDrawer.value = false

}
//修改会员信息
const updateMember = () => {
  //todo 调用后台接口 保存修改之后的信息 

  console.log('---------修改会员信息--------')
  //修改成功关闭抽屉
   $emit('update:editMemberDrawer', false)
  ElMessage({
    message: '修改成功',
    type: 'success'
  })

}
</script >
<style lang="less" scoped>
</style>